<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/demo.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<table id="dg" class="easyui-datagrid" style="width:700px;height:250px"
       data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
</table>


<div id="win"></div>

<input id="userId" hidden="hidden" th:value="${circleModel.userId}">

</body>

<script>

    function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    };

    var userId = $("#userId").val();

    $('#dg').datagrid({
        url:'/circle/user/'+userId+'/circles',
        pagination : true,//分页控件
        pageList: [10, 20, 30, 40, 50],
        fit: true,   //自适应大小
        border:false,
        nowrap: true,//数据长度超出列宽时将会自动截取。
        rownumbers:true,//行号
        fitColumns:true,//自动使列适应表格宽度以防止出现水平滚动。

        columns:[[
            {field:'circleName',title:'圈子名称',width:100},

            {field:'joinTime',title:'加入工作圈时间',width:120,formatter: function(value,row,index){
                return formatDateTime(value);
            }}
        ]]
    });


</script>
</html>